<template>
  <div class="content-wrapper">
    <common-scroll class="const-scroll"
                   :data="list"
                   ref="content"
                   :probeType="probeType"
                   :listenScroll="listenScroll"
                   @scroll="scrollTo">
      <div>
        <ul>
          <li v-for="item of list"
              :key="item.id"
              class="item"
              ref="list">
            <h3>{{item.title}}</h3>
            <ul class="content">
              <li v-for="subItem of item.sub"
                  :key="subItem.id"
                  class="content-item"
                  @click="handleSkip(subItem)">
                <img :src="subItem.cate_icon"
                     alt="">
                <p class="desc">{{subItem.cate_title}}</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import { mapMutations } from 'vuex'
export default {
  name: 'ClassifyCotent',
  components: {
    CommonScroll
  },
  props: {
    list: {
      type: Array
    },
    index: {
      type: Number
    }
  },
  data () {
    return {
      scrollY: 0,
      currentIndex: 0
    }
  },
  methods: {
    scrollTo (pos) {
      this.scrollY = pos.y
    },
    calculateHeight () {
      if (!this.$refs.list.length) {
        return
      }
      const lists = this.$refs.list
      let height = 0
      this.listsHeight = []
      this.listsHeight.push(height)
      for (let i = 0, len = lists.length; i < len; i++) {
        height += lists[i].clientHeight
        this.listsHeight.push(height)
      }
    },
    getSearch (value) {
      let locationData = JSON.parse(this.$localStorage.get('locationData'))
      if (locationData != null) {
        locationData = Object.assign({}, locationData, { cate_id: value.id, shop_name: value.cate_title, order: 'sort' })
        this.$api.search.getSearchResult({ ...locationData })
          .then(this.getSearchSucc)
          .catch((e) => {
            console.log(e)
          })
      }
    },
    getSearchSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        const data = res.data
        this.changeSearchResult(data)
      }
    },
    handleSkip (desc) {
      this.getSearch(desc)
      const searchParams = { name: desc.cate_title, sort: 'sort', id: desc.id }
      this.changeSearchParams(searchParams)
      this.$router.push({
        path: '/result',
        query: {
          name: desc.cate_title,
          sort: 'sort'
        }
      })
    },
    ...mapMutations({
      changeSearchResult: 'changeSearchResult',
      changeSearchParams: 'changeSearchParams'
    })
  },
  created () {
    this.probeType = 3
    this.listenScroll = true
    this.listsHeight = []
  },
  watch: {
    list () {
      this.$nextTick(() => {
        this.calculateHeight()
      })
    },
    index () {
      this.$refs.content.scrollToElement(this.$refs.list[this.index], 2000)
    },
    scrollY (newY) {
      const list = this.listsHeight
      if (newY > -4) {
        this.currentIndex = 0
        return
      }
      for (let i = 0, len = list.length; i < len; i++) {
        let h1 = list[i]
        let h2 = list[i + 1]
        if (-newY >= h1 && -newY < h2) {
          this.currentIndex = i
          return
        }
      }
      this.currentIndex = list.length - 2
    },
    currentIndex () {
      this.$emit('changeColor', this.currentIndex)
    }
  },
  activated () {
    setTimeout(() => {
      this.$refs.content._initalScroll()
    }, 20)
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.content-wrapper .const-scroll
  top 106px
  z-index 5
  margin-left 190px
  width calc(100% -190px)

.item
  height 600px
  box-sizing border-box

  .content
    display flex
    width 100%

    .content-item
      width 100px
      height 150px
      align-items center
      justify-content center
      margin-right 30px
      flex-wrap wrap

      img
        width 100px
        height 100px
        border-radius 50%

      .desc
        text-align center
        font-size @smallFz
        color $graySecond
        text-align center
        line-height 50px

h3
  font-size $fzOne
  margin-bottom 20px
</style>
